import { defineComponent } from "vue";
import { useStore } from "vuex";
import utils from "@/lib/utils";
export default defineComponent({
    name: "MenuList",
    props: {
        activeMenu: {
            type: String,
            default: "",
        },
        isCollapse: {
            type: Boolean,
            default: false,
        },
    },
    emits: ["change"],
    setup(props, ctx) {
        const store = useStore();
        const { getMenuList } = store.getters;
        const selectMenu = (index: string, indexPath: string[]) => {
            ctx.emit("change", index);
        };
        const recursionMenu = (menu: any, children: number): any => {
            const titleSlot = () => '';
            if (!utils.empty(menu) && menu.children.length > 0) {
                const submenuTitleSlot = {
                    title: () => (
                        <div>
                            <div class="phq-menu-icon">
                                {!utils.empty(menu.img) ? <img src={menu.img} /> : <i class={menu.icon} style={`background:${menu.icon_color};`}></i>}
                            </div>
                            <span class="phq-menu-txt">{menu.title}</span>
                        </div>
                    )
                };
                return (
                    <el-submenu index={menu.route} class={props.isCollapse ? 'el-menu-children0' : `el-menu-children${children}`} v-slots={submenuTitleSlot}>
                        {
                            menu.children.map((item: any) => {
                                return recursionMenu(item, children + 1);
                            })
                        }
                    </el-submenu>
                );
            } else {
                const TitleSlot = {
                    title: () => (<span class="phq-menu-txt">{menu.title}</span>)
                };
                return (
                    <el-menu-item index={menu.route} class={props.isCollapse ? 'el-menu-children0' : `el-menu-children${children}`}
                        v-slots={TitleSlot}>
                        <div class="phq-menu-icon">
                            {!utils.empty(menu.img) ? <img src={menu.img} /> : <i class={menu.icon} style={`background:${menu.icon_color};`}></i>}
                        </div>
                    </el-menu-item >
                );
            }
        };
        return () => (
            <el-menu default-active={props.activeMenu} unique-opened collapse={props.isCollapse} onSelect={selectMenu}>
                {
                    getMenuList.map((item: any, index: number) => {
                        return recursionMenu(item, 0);
                    })
                }
            </el-menu>
        );
    },
});
